<template>
  <div>
    <div class="top">
      <div class="top-menu">
        <slot name="topMenu"></slot>
      </div>

      <div class="img">
        <slot name="topImg"></slot>
      </div>
    </div>

    <div class="bottom">
      <div class="bottom-title">
        <slot name="bottomMenu"></slot>
      </div>
      <div class="bottom-content">
        <slot name="bottomContent"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.top {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  .top-menu {
    width: 40vw;
    min-height: calc(200px - 20px);
    height: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: $shadow;
    border-radius: 4px;
  }
  .img {
    margin: 0 40px;
  }
}

.bottom {
  width: calc(100% - 40px);
  height: 60vh;
  display: flex;
  .bottom-title {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bottom-content {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
  }
}
</style>
